<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script type="text/javascript" src="https://unpkg.com/watermark-dom@2.3.0/index.js"></script>
    <title>Document</title>
    <style>
      .box {
        height: 30vh;
        border: 1px solid #999;
      }
    </style>
  </head>
  <body>
    <div class="box" id="app">
      <p>
        文章参考：
        <a href="https://blog.csdn.net/Aria_Miazzy/article/details/99649926">
          使用 watermark-dom.js 给HTML、Word、PPT、Excel等添加水印
        </a>
      </p>
    </div>
    <hr />
    <div class="box" id="user">
      <p>我是内容</p>
    </div>
    <script>
      window.onload = function () {
        // 参数配置参见: https://www.npmjs.com/package/watermark-dom
        watermark.load({
          watermark_parent_node: 'app',
          watermark_txt: `测试水印 ${new Date().toLocaleString()}`
        })
        watermark.load({
          watermark_id: 'user-wm_box',
          watermark_parent_node: 'user',
          watermark_txt: '这是水印哦',
          watermark_alpha: 0.26,
          watermark_angle: 15,
          watermark_color: '#5a232e',
          watermark_cols: 9,
          watermark_font: '华文彩云',
          watermark_fontsize: '20px',
          watermark_height: 63,
          watermark_rows: 8,
          watermark_width: 108,
          watermark_x: 35,
          watermark_x_space: 10,
          watermark_y: 35,
          watermark_y_space: 10
        })
      }
    </script>
  </body>
</html>
